<template>
  <hi-drawer :title="formData.id ? '修改' : '新增'" :visible.sync="visible" size="500px">
    <el-form
      ref="ruleForm"
      :model="formData"
      :rules="rules"
      label-width="130px"
      style="margin-top: 20px; margin-bottom: 20px;"
    >
      <el-form-item label="名称：" prop="name">
        <el-input v-model.trim="formData.name" placeholder="请输入名称" />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="save">确 定</el-button>
    </span>
  </hi-drawer>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      loading: false,
      rules: {
        name: [{ required: true, message: "不能为空" }]
      },
      formData: {}
    };
  },
  methods: {
    save() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          try {
            this.loading = true;
            // 这里发送请求
            this.visible = false;
          } catch (err) {
            this.$log.error(err)
          }
          this.loading = false;
        }
      });
    },
    open(params) {
      this.visible = true;
      this.formData = params || {};
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate();
      });
    }
  }
};
</script>
